<template>
  <div class="ysqxx-map-legend">
    <div
      class="expand-top-container"
      :style="{width: contentWidth}"
      v-show="visible"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        class="ysqxx-map-legend-item"
        @click="toggleLayerVisible(item)"
      >
        <span :class="['ysqxx-legend-item-text', visibleLayerMap[item.layerId] ? 'c-gray-blue' : 'c-grey']">{{ item.name }}：</span>

        <BKSvgIcon
          :icon-class="item.icon"
          class="f-20 legend-svg"
        />
      </div>
    </div>
    <div
      class="flex-0 legend-toggle-button"
      @click="visible = !visible"
      :style="{width: contentWidth}"
    >
      图 例<i :class="['m-l-tiny', visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { debounce } from 'throttle-debounce'
export default {
  name: 'YsqxxMapLegend',
  props: {
    isGlobal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visibleLayerMap: {},
      visible: true,
      contentWidth: '111px',
      list: [{
        name: '水文水位站',
        icon: 'svg-ysqxx-map-swsw',
        layerId: 'ysqxx_SWSW'
      },
      {
        name: '水质站',
        icon: 'svg-ysqxx-map-sz',
        layerId: 'ysqxx_SZ'
      }, {
        name: '墒情站',
        icon: 'svg-ysqxx-map-sq',
        layerId: 'ysqxx_SQ'

      }, {
        name: '地下水站',
        icon: 'svg-ysqxx-map-dxs',
        layerId: 'ysqxx_DXS'
      },
      {
        name: '深层',
        icon: 'svg-ysqxx-map-deep'
      },
      {
        name: '浅层',
        icon: 'svg-ysqxx-map-shallow'
      }
      ]
    }
  },
  computed: {
    ...mapState('ysqxx', ['visibleLayerId'])
  },
  created () {
    this.debouncedSyncLayerVisibleInfo = debounce(50, this.syncLayerVisibleInfo)
    this.$mapManager.addEventListener('updateLayer', this.debouncedSyncLayerVisibleInfo)
  },
  beforeDestroy () {
    this.$mapManager.removeEventListener('updateLayer', this.debouncedSyncLayerVisibleInfo)
  },
  watch: {
    list: {
      immediate: true,
      handler () {
        this.syncLayerVisibleInfo()
      }
    }
  },
  methods: {
    async syncLayerVisibleInfo () {
      if (!this.list || !this.$mapManager.getMapComponent()?.map1) return
      const visibleLayerMap = {}
      const allLayerIds = this.$mapManager.getMapComponent().map1.layerManager.getAllLayer()
      for (const l of this.list) {
        if (allLayerIds.includes(l.layerId)) {
          visibleLayerMap[l.layerId] = (await this.$mapManager.invokeUtils('getLayer', l.layerId)).getVisible()
        } else {
          visibleLayerMap[l.layerId] = true
        }
      }
      this.visibleLayerMap = visibleLayerMap
    },
    async toggleLayerVisible (item) {
      const layer = await this.$mapManager.invokeUtils('getLayer', item.layerId)
      if (!layer) return
      const visible = !this.visibleLayerMap[item.layerId]
      if (layer.get('hasCluster')) {
        this.$mapManager.invoke('setLayerVisible', item.layerId + '_cluster', visible)
      }
      this.$mapManager.invoke('setLayerVisible', item.layerId, visible)
      this.visibleLayerMap[item.layerId] = visible

      if (this.visibleLayerId !== item.layerId || ((this.visibleLayerId === item.layerId) && !visible)) {
        this.$store.commit('ysqxx/setVisibleLayerId', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ysqxx-map-legend {
  .expand-top-container {
    position: absolute;
    z-index: 1;
    background: #042976b8;
    border: 1px solid #0386c873;
    border-radius: 6px;
    padding: 10px 8px;
    bottom: 29px;
    left: 0;
  }

  .legend-toggle-button {
    background: #042976b8;
    border: 1px solid #0386c873;
    color: #dbeffd;
    border-radius: 6px;
    font-size: 14px;
    height: 28px;
    padding: 7px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .ysqxx-map-legend-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    justify-content: space-between;

    .ysqxx-legend-item-text {
      font-size: 12px;
      // margin-right: 5px;
    }
  }
}

</style>
